<template>
  <div id="DatavTable">
    <dv-scroll-board
      :config="config"
      ref="scrollBoard"
      style="width:100%;height:100%"
    />
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'DatavTable',
  data () {
    return {
      // 配置
      config: {
        // 标头
        header: ['列1', '列2', '列3'],
        // 数据
        data: [],
        // 是否开启序号
        index: true,
        // 宽度-按照顺序-不写就是平均分配
        columnWidth: [50],
        // 居中方式
        align: ['center', 'center', 'center', 'center'],
        // 滚动时间-每条
        waitTime: 3500,
        // 序号别名
        indexHeader: '排名'
      },
      // 定时器加载数据
      time: null,
      // datav数据刷新间隔
      datavNumber: 5,
      // datav下标
      datavIndex: 15,
      // 追加数据
      addlist: [],
 // 禁止鼠标悬浮暂停
      hoverPause: false
    }
  },
  created () {
    // 模拟调接口-等待data-html加载完毕-不然取不到数据会报错
    this.$nextTick(() => {
      this.doUpdate()
    })
  },
  methods: {
    moment,
    // 测试方法-测试直接往config.data添加数据时，轮播表数据是否会刷新
    ceshi () {
      this.moment.add(123123)
      this.config.data.push(
        ['行', '行1', '行1列3'],
        ['行', '行2', '行2列3'],
        ['行', '行3', '行3列3'],
        ['行', '行4', '行4列3'],
        ['行', '行5', '行5列3'],
        ['行', '行6', '行6列3'],
        ['行', '行7', '行7列3'],
        ['行', '行8', '行8列3'],
        ['行', '行9', '行9列3'],
        ['行', '行1', '行10列3']
      )
      // 解决办法-1
      // 重新new一个对象-轮播数据确实更新了，
      // 缺点-没有衔接滚动，又从1开始滚动
      // this.config = { ...this.config }
      console.log('this.config.data', this.config.data)
    },
    doUpdate () {
      if (this.addlist.length < 10) {
        console.log('第一次')
        // 调用第一次接口赋值数据-模拟
        this.config.data = [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
          ['行6列1', '行6列2', '行6列3'],
          ['行7列1', '行7列2', '行7列3'],
          ['行8列1', '行8列2', '行8列3'],
          ['行9列1', '行9列2', '行9列3'],
          ['行10列1', '行10列2', '行10列3']
        ]
        // 记录数据-
        this.addlist = [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
          ['行6列1', '行6列2', '行6列3'],
          ['行7列1', '行7列2', '行7列3'],
          ['行8列1', '行8列2', '行8列3'],
          ['行9列1', '行9列2', '行9列3'],
          ['行10列1', '行10列2', '行10列3']
        ]
      }
      //   开始判断加载数据
      console.log('this.config.data.length', this.config.data.length)
      console.log('this.config.data', this.config.data)
      console.log('this.addlist', this.addlist.length)
      // 第二次加载
      if (this.addlist.length > 10) {
        console.log('第二次执行')
        // 刷新时间10次
        this.datavNumber = 10
      }

      // 先清空-在触发
      // 不这样写，修改时间间隔后，定时器时间间隔不会修改
      clearInterval(this.time)
      this.time = setInterval(this.datavloaddata, 3500 * this.datavNumber)
    },
    // datav-添加数据方法
    datavloaddata () {
      // 页码加一
      console.log('执行调接口-第二次')
      let a = [
        ['行', '行1', '行1列3'],
        ['行', '行2', '行2列3'],
        ['行', '行3', '行3列3'],
        ['行', '行4', '行4列3'],
        ['行', '行5', '行5列3'],
        ['行', '行6', '行6列3'],
        ['行', '行7', '行7列3'],
        ['行', '行8', '行8列3'],
        ['行', '行9', '行9列3'],
        ['行', '行1', '行10列3']
      ]
      // 模拟调接口赋值数据-res.data - 轮播数据
      this.addlist = [...this.addlist, ...a]

      // 数据保存一份-没有什么作用
      // this.config.data = this.addlist

      // 开始轮播数据下标-建议传
      // 不传也可以-不会影响太大
      // 传的话就是添加数据开始每次数据长度-15 因为一屏可以显示5个，
      // 或者是第一次是5 每次加10 - 比较麻烦
      let c = this.addlist.length - this.datavIndex
      console.log('this.addlist.length', this.addlist.length)
      console.log('this.datavIndex', this.datavIndex)
      console.log('c', c)

      // 解决方法二-使用updateRows（）方法追加数据
      // 优点-无限追加数据-无缝衔接
      // 缺点-不能直接使用，需要代码触发（比如定时器）这个方法相当于一个缓存，并不会直接把数据更新到config里面
      // 就更element-table表格选中道理一样，必须先渲染数据表格，才能通过方法选中（直接写死是选中不了-可能没有标记）
      // this.$refs['scrollBoard'].updateRows(this.addlist,c)
      this.$refs['scrollBoard'].updateRows(this.addlist)

      // 配置数据-上面赋值了就会变，不赋值是不会变（因为updateRows（）方法-不会修改config里面数据）
      console.log('this.config.data', this.config.data)
      // 执行下一次
      this.doUpdate()
    }
  },
  beforeDestroy () {
    // 在页面销毁后，清除计时器
    clearInterval(this.time)
  }
}
</script>

<style lang="scss" scoped>
#DatavTable {
  width: 100%;
  height: 100%;
}
</style>